<template>
  <h3>{{appObject.wg.name}}</h3>
  <el-card class="box-card" style="margin-bottom: 10px;">
    <template #header>
      <div class="card-header">
        <el-row>
          <el-col :span="18"><span>
          {{appObject.wg.name}}
          </span></el-col>
          <el-col :span="6">
            <el-button icon="Star" :type="checkIsFocus() ? 'warning' : 'default'"
              circle style="margin-right: 10px;" 
              @click="focusWG(!checkIsFocus())"/>
          </el-col>
        </el-row>
      </div>
    </template>
    <div class="text item">
      <el-row>
        <el-col :span="18"><span>
          <div style="margin-top: 10px;">名称：{{appObject.wg.name}}</div>
          <div style="margin-top: 10px;">描述：{{appObject.wg.description}}</div>
          <div style="margin-top: 10px;">日程：{{appObject.wg.schedule}}</div>
          <div style="margin-top: 10px;">目录：{{appObject.wg.learnoutcome}}</div>
          <div style="margin-top: 10px;">创建者：{{appObject.wg.creatorName}}</div>
          <div style="margin-top: 10px;">成员：
            <span v-for="(item, index) in appObject.wg.subtaskList">
              {{item.assignName}} &nbsp;&nbsp;
            </span>
          </div>
          <div style="margin-top: 10px;">开始日期：{{appObject.wg.startTime}}</div>
          <div style="margin-top: 10px;">结束日期：{{appObject.wg.endTime}}</div>
        </span></el-col>
        <el-col :span="6">
          <el-tag v-if="appObject.wg.status == 1" type="danger">已完成</el-tag>
          <el-tag v-else-if="checkIsMember()">已加入</el-tag>
          <el-tag v-else-if="checkIsApplying()" type="warning">申请中</el-tag>
          <el-tag v-else-if="checkIsReject()" type="danger">已拒绝</el-tag>
          <el-button v-else-if="!checkIsMember()" link @click="showAddApply()">申请加入</el-button>
          
        </el-col>
      </el-row>
    </div>
  </el-card>
  <AddApply :callbackFunc="initData" :key="new Date().getTime()" :currentWgId="appObject.currentWgId"/>
</template>

<script setup>
  import AddApply from './AddApply.vue'
  import { reactive } from 'vue'
  
  import { getWGById, addFocusWG, cancelFocusWg, addMember, delMember } from '../http/wgApi.js'
  
  import wgStore from '../store/wg.js'
  import userStore from '../store/user.js'
  import applyStore from '../store/apply.js'
  import {storeToRefs} from 'pinia'
  
  import { getApply } from '../http/applyApi.js'
  import { ElNotification } from 'element-plus'
  
  const uStore = userStore()
  const { user, getUserId } = storeToRefs(uStore)
  
  const wStore = wgStore()
  const { wgId } = storeToRefs(wStore)
  
  const aStore = applyStore()
      
  const appObject = reactive({
    wg: {
      id: wStore.getWgId,
      name: "",
      description: "",
      schedule: "",
      learnOutcome: "",
      creatorId: "",
      creatorName: "",
      subtaskList: [],
      applysList: [],
      focusList: []
    },
    currentWgId: 0,
    applyList: []
  })
  
  const initData = () => {
    getWGById(wStore.getWgId).then(res => {
      res = res.data
      appObject.wg = res.data
    })
  }
  initData()
  
  const focusWG = (flag) => {
    if(flag) {
      addFocusWG({
        userId: uStore.getUserId,
        wgId: appObject.wg.id
      }).then(res => {
        initData()
        ElNotification({
          title: '关注成功',
          message: '您已成功关注WG:' + appObject.wg.name,
          type: 'success',
        })
      })
      return
    }
    cancelFocusWg({
      userId: uStore.getUserId,
      wgId: appObject.wg.id
    }).then(res => {
      initData()
      ElNotification({
        title: '取消成功',
        message: '您已成功取消对WG:' + appObject.wg.name + "的关注",
        type: 'success',
      })
    })
  }
  
  const checkIsApplying = () => {
    let flag = false
    appObject.wg.applysList.forEach(item => {
      if(item.status == 0 && appObject.wg.id == item.wgId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsReject = () => {
    let flag = false
    appObject.wg.applysList.forEach(item => {
      if(item.status == 2 && appObject.wg.id == item.wgId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsMember = () => {
    let flag = false
    appObject.wg.subtaskList.forEach(task => {
      if(task.assignId == uStore.getUserId) {
        flag = true
      }
    })
    return flag
  }
  
  const checkIsFocus = () => {
    let flag = false
    appObject.wg.focusList.forEach(item => {
      if(item.wgId == appObject.wg.id && item.userId == uStore.getUserId) {
        flag = true
      }
    })
    return flag
  }
  
  const showAddApply = () => {
    appObject.currentWgId = appObject.wg.id
    aStore.updateShowAddDialog(true)
  }
  
  
  
</script>

<style scoped>
</style>